<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |  -->
      <router-link to="/one">pageOne</router-link> | 
      <router-link to="/two">pageTwo</router-link> | 
      <router-link to="/three">pageThree</router-link> | 
      <router-link to="/four">pageFour</router-link> | 
      <router-link to="/five">pageFive</router-link> | 
      <router-link to="/six">pageSix</router-link> | 
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
/* 设置字体为白色，背景为黑色 */
*{
	color: #fff;
  background-color: black;
  /* overflow: hidden; */
}
p{
	font-size: 30px;
  background-color: rgba(0,0,0,0);
}
/* 按钮样式 */
.btn{
	width: 120px;
	height: 60px;
	text-align: center;
	border-radius: 20px;
	color: white;
  margin-right: 20px;
}
.bt1{
  background-color: #29ABE6;
}
.bt2{
  background-color: black;
}
/* 背景图片样式 */
.bgp{
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 0;
}
/* 标题样式 */
.title{
  font-weight: 600;
	position: absolute;
  height: 100px;
	font-size: 35px;
	left: 50%;
	transform: translateX(-50%);
	top: 10px;
	z-index: 2;
  background-color: rgba(0,0,0,0);
}

</style>
